<template>
  <div class="h-full overflow-hidden border-box">
    <div class="w-full h-full bg-white overflow-hidden p-10px flex flex-col">
      <div ref="chart1Ref" flex-1 p10></div>
      <div ref="chart2Ref" flex-1 p10></div>
    </div>
  </div>
</template>

<script setup>
import ECharts from '@/plugin/echarts/index.js';
import { onBeforeUnmount, onMounted, ref } from 'vue';
let chart1Ref = ref(null);
let chart2Ref = ref(null);
let myChart1 = ref();
let myChart2 = ref();
let chartOption = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
    },
  ],
};

onMounted(() => {
  myChart1.value = ECharts.init(chart1Ref.value);
  myChart2.value = ECharts.init(chart2Ref.value);
  myChart1.value && myChart1.value.setOption(chartOption);
  myChart2.value && myChart2.value.setOption(chartOption);
});
onBeforeUnmount(() => {
  myChart1.value.dispose();
  myChart2.value.dispose();
});
</script>

<style scoped></style>
